import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import $ from 'jquery';
import axios from 'axios';
import BaseHeader from '@/components/base/baseHeader';
import GlobalBottom from '@/components/base/GlobalBottom';
import './register.scss';

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      pass: "",
      tel: "",
      verifi:'',
      false1: false,
      false2: false,
      false3: false,
      false4: false,
      false5: false,
      username: '',
      password: '',
      nick:''
    }
  }
  change () {
    let username = this.refs.username.value
    if (/^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i.test(username)) {
      this.setState({
        tel: "",
        false1: true,
        username: username
      })
    } else {
      this.setState({
        tel: "邮箱格式有误",
        false1: false
      })
    }
  }
  registermima () {
    let password = this.refs.password.value;
    console.log(password);
    if (/^[0-9A-Za-z]{6,}$/.test(password)) {
      this.setState({
        pass: "",
        false2: true,
        password: password
      })
    } else {
      this.setState({
        pass: "密码格式有误",
        false2: false
      })
    }
  }
  verification () {
    let code = this.refs.verificationCode.value;
    var yanzhengma = document.getElementsByClassName('yanzhengma');
    var yanzhengmas =$(yanzhengma).text();
    if (code === yanzhengmas) {
      // console.log("0");
      this.setState({
        verifi: "",
        false4: true
      })
    } else {
      // console.log("1");
      this.setState({
        verifi: "验证码有误",
        false4: false
      })
    }
  }
  
  registerapi () {
    var nick = document.getElementById("nick").value;
    if(nick !== ''){
      this.setState({
        false3:true
      })
    }
    if(this.state.false1 && this.state.false2&& this.state.false3 && this.state.false4 ) {
      axios.post(`http://poem.daxunxun.com:8000/api/users/login`,{nick:`${nick}`,username:`${this.state.username}`,password:`${this.state.password}`})
      .then(data => {
        console.log(data.data.message);
        //跳转页面
        if( data.data.code === 1) {
          alert('登录成功');
          var uid = data.data.uid;
          localStorage.setItem("isok","ok");
          localStorage.setItem("uid",uid);
          this.props.history.push('/collect');
        }else {
          alert('登录失败')
        }
      })
    }
  }
  
  render() {
    return (
      <div className="container">
        <BaseHeader />
        <div className="registertop">
          <h1 className="registerwelcom">欢迎加入古诗文网</h1>
          <span className="registergologin">
            我还没有账号,先去<Link to="/register" style={{color:'#19537D'}}>注册</Link>
          </span>
        </div>
          <div className="div">
           <div className="mainreg2">
             <span>邮  箱</span>
             <input className="reg-telnum-tel" type="text" name="username" ref="username" onBlur={ this.change.bind(this) } placeholder="邮箱号" /> <b className="registertip" style={{color:'#D90013', fontWeight:100}}>{ this.state.tel }</b>
           </div>
           <div className="mainreg2">
             <span>昵  称</span>
             <input  type="text" placeholder="昵称" id="nick"/>
           </div>
           <div className="mainreg2">
             <span>密  码</span>
             <input  type="password" ref="password" placeholder="密码" onBlur={ this.registermima.bind(this) }/>
             <b className="registertip" style={{color:'#D90013', fontWeight:100}}>{ this.state.pass }</b>
           </div>
           <div className="mainreg3">
             <span className="yanzhengtitle">验证码</span>
             <input  type="text" ref="verificationCode" onBlur={ this.verification.bind(this) }/>
             <span className="yanzhengma">1234</span>
             <b className="registertip" style={{color:'#D90013', fontWeight:100,marginLeft:'5px'}}>{ this.state.verifi }</b>
           </div>
           
           <div className="mainreg5" onClick={this.registerapi.bind(this)}>
             <span className="reg-button">登录</span>
           </div>
         </div>
        <GlobalBottom />
      </div>
    )
  }
}

export default Com;
